<template>
	<div class="container">
		<h1>
			Vue3 + Vite {{ t('wellcome') }}
			<el-switch
				v-model="langType"
				active-text="英文"
				inactive-text="中文"
			></el-switch>
		</h1>

		<virtualList>
			<template #item="row">
				<div>{{ row }}</div>
			</template>
		</virtualList>

		<div>
			<el-button @click="sendCode"> {{ codeTtx }} </el-button>
		</div>

		<div class="package">
			<h2 class="title">{{ packageData.name }}</h2>
			<h2 class="title">scripts</h2>
			<div class="item" v-for="(value, key) in packageData.scripts" :key="key">
				<div class="label">{{ key }}：</div>
				<div class="value">{{ value }}</div>
			</div>
			<h2 class="title">dependencies</h2>
			<div
				class="item"
				v-for="(value, key) in packageData.dependencies"
				:key="key"
			>
				<div class="label">{{ key }}：</div>
				<div class="value">{{ value }}</div>
			</div>
			<h2 class="title">devDependencies</h2>
			<div
				class="item"
				v-for="(value, key) in packageData.devDependencies"
				:key="key"
			>
				<div class="label">{{ key }}：</div>
				<div class="value">{{ value }}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import {
	onMounted,
	reactive,
	ref,
	watch,
	getCurrentInstance
} from '@vue/runtime-core'
import { testApi } from '../request/index.js'
import { useI18n } from 'vue-i18n'
import virtualList from '../components/virtual-list.vue'
import useSendPhoneCode from '../hooks/sendPhoneCode'

let { t } = useI18n()
let langType = ref(false)
let current = getCurrentInstance().appContext.config.globalProperties

let { sendCode, codeTtx } = useSendPhoneCode()

const packageData = reactive({
	name: '',
	scripts: {},
	dependencies: {},
	devDependencies: {}
})

onMounted(() => {
	getList()
})

watch(langType, v => {
	if (v) {
		current.$i18n.locale = 'en-US'
	} else {
		current.$i18n.locale = 'zh-US'
	}
})

const getList = async () => {
	try {
		let result = await testApi()
		packageData.name = result.data.name
		packageData.scripts = result.data.scripts
		packageData.dependencies = result.data.dependencies
		packageData.devDependencies = result.data.devDependencies
		console.log(result.data)
	} catch (error) {
		console.error(error)
	}
}
</script>

<style lang="less" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 30px;
}

.package {
	width: 380px;
	padding: 15px;
	border: 1px solid silver;
	.title {
		font-size: 24px;
		font-weight: bold;
		line-height: 40px;
	}
	.item {
		height: 32px;
		display: flex;
		align-items: center;
		font-size: 16px;
		.label {
			// width: 200px;
			text-align: right;
			color: black;
		}
		.value {
			color: rgb(255, 1, 1);
		}
	}
}
</style>
